<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/static/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
<head>
    <title>商品分类</title>
    <%@include file="/static/include/head.jsp" %>
    <link href="${ctx }/static/jquery/ztree/3.5.28/css/metroStyle/metroStyle.css" rel="stylesheet" />

    <script src="${ctx }/static/jquery/ztree/3.5.28/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<ul id="tree" class="ztree" style="width:300px; overflow:auto;"><!-- tree here --></ul>
</body>
<script type="text/javascript" >
    var zTreeObj;
    // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        async: {
            enable: true,
            url: '${path}/product/goodsCat/treeData',
            autoParam: ["id"]
        },
        data:{ // 必须使用data
            simpleData : {
                enable : true,
                idKey : "id", // id编号命名
                pIdKey : "pid", // 父id编号命名
                rootId : 0
            }
        },
        callback : { // 回调函数
            onClick : function(event, treeId, treeNode, clickFlag) {
                if(clickFlag) {
                    alert(" 节点id是：" + treeNode.id + ", 节点文本是：" + treeNode.name);
                }
            }
        }
    };

    $(document).ready(function(){
        zTreeObj = $.fn.zTree.init($("#tree"), setting);
    });
</script>
</html>
